<template>
	<view class="roundProgress">
		<view
			:style="{
				width: `${width}rpx`,
				height: `${width}rpx`
			}"
			class="roundProgress__progress"
		>
			<block v-for="index in 100" :key="index">
				<view
					v-if="index % 2 === 0"
					:style="{
						backgroundColor: index <= props.ratio ? activeColor : notActiveColor,
						transform: `rotate(${(360 / 100) * index}deg) translate(${parseInt(width / 2 - 20)}rpx)`
					}"
					class="roundProgress__progress__line"
				></view>
			</block>
			<view class="roundProgress__progress__center"><slot /></view>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
	ratio: {
		type: Number,
		default: 0
	},
	activeColor: {
		type: String,
		default: '#F64E54'
	},
	notActiveColor: {
		type: String,
		default: '#ccc'
	},
	width: {
		type: [Number, String],
		default: 300
	}
});
</script>

<style lang="scss">

.roundProgress {
	display: flex;
	justify-content: center;

	&__progress {
		position: relative;

		&__line {
			position: absolute;
			width: 20rpx;
			height: 5rpx;
			border-radius: 5rpx;
			transform-origin: 0 0;
			display: inline-block;
			left: 50%;
			top: 50%;
		}
		&__center {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			align-items: center;
			flex-direction: column;
		}
	}
}
</style>
